<template>
    <div class="swiper-root" @touchstart="controlShow">
        <div
                class="container"
                :style="conStyle"
                :class="{transition:isTransition}"
                @transitionend="tranEnd"
        >
            <div class="swiper-item">
                <img :src="imgs[imgs.length-1]">
            </div>
            <div v-for="img,i in imgs" class="swiper-item">
                <img :src="img">
            </div>
            <div class="swiper-item">
                <img :src="imgs[0]">
            </div>
        </div>
        <div class="left-icon" @touchstart="preImg" :style="{opacity:isShowControl}"></div>
        <div class="right-icon" @touchstart="nextImg" :style="{opacity:isShowControl}"></div>
        <!-- 索引点 -->
        <ul class="list">
            <li v-for="i in imgs.length" :class="currentIndex==i?'highlight':''"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imgs: ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg", "/img/4.jpg"],
                // 记录当前第几张图
                currentIndex: 1,
                // 控制是否过渡
                isTransition: true,
                // 控制是否可以点击左右箭头
                isClick: true,
                // 控制显示控制箭头
                isShowControl:0
            };
        },
        mounted() {
            // 自动轮播
            setInterval(()=>{
                this.nextImg();
            },3500)
        },
        methods: {
            // 下一张
            nextImg() {
                if (!this.isClick) {
                    return;
                }
                this.isClick = false;
                this.currentIndex++;
            },
            // 上一张
            preImg() {
                if (!this.isClick) {
                    return;
                }
                this.isClick = false;
                this.currentIndex--;
            },
            // 动画结束时
            tranEnd() {
                this.isClick = true;
                if (this.currentIndex >= this.imgs.length + 1) {
                    this.isTransition = false;
                    this.currentIndex = 1;
                    setTimeout(() => {
                        this.isTransition = true;
                    }, 17)
                } else if (this.currentIndex <= 0) {
                    this.isTransition = false;
                    this.currentIndex = this.imgs.length;
                    setTimeout(() => {
                        this.isTransition = true;
                    }, 17)
                }
            },
            // 点击出现控制箭头
            controlShow(){
                if(this.isShowControl){
                    return;
                }
                this.isShowControl = 1;
                setTimeout(()=>{
                    this.isShowControl = 0;
                },3000)
            }
        },
        computed: {
            conStyle() {
                return {
                    left: -this.currentIndex * 100 + "%"
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .swiper-root {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .container {
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
        img {
            width: 100%;
        }
    }

    .swiper-item {
        flex-shrink: 0;
        width: 100%;
        border-radius: 1.1vw;
        overflow: hidden;
    }

    .left-icon, .right-icon {
        position: absolute;
        top: 50%;
        width: 10vw;
        height: 10vw;
        background-size: 100% 100%;
        transform: translate(0, -50%);
        transition: all 0.7s;
    }

    .left-icon {
        background-image: url("/img/left-icon.png");
        left: 0vw;
    }

    .right-icon {
        background-image: url("/img/right-icon.png");
        right: 0vw;
    }

    .transition {
        transition: all 0.7s;
    }
    .list{
        position: absolute;
        left: 50%;
        bottom: 4vw;
        list-style: none;
        display: flex;
        transform: translate(-50%,0);
        li{
            width: 2.1vw;
            height: 2.1vw;
            margin: 0 2.7vw;
            background-color: #f7f7f7;
            box-shadow: 0 0 30px 0px #161616;
            border-radius: 1.05vw;
            transition: all 0.7s;
            transform-origin: 50% 50%;
        }
    }
    .highlight{
        width: 4.8vw!important;
        background-color: #fff;
    }
</style>